<template>
    <div>
        <h1 style="font-family: 宋体; font-size: 30px; margin-bottom: 40px; text-align: left; margin-left: 20px;">历年粮食作物播种和产量对比趋势</h1>
        <div ref="echartsBar" class="echarts"></div>
    </div>
</template>
<script setup>
    import * as echarts from 'echarts'
    import { ref,onMounted,reactive } from 'vue';
    import axios from 'axios';
    let options = reactive([])
    const echartsBar = ref()
    function chartBarInit(){
        let myChart = echarts.init(echartsBar.value,"light",{
            width: 600,
            height: 600
        })
        var option = {
            tooltip: {
                trigger: 'axis'
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            legend: {
                data: ['产量', '播种量'],
                textStyle: {
                    color: 'white'
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: []
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                name: '产量',
                type: 'line',
                stack: 'Total',
                data: [],
                color: '#FFBF00'
                },
                {
                name: '播种量',
                type: 'line',
                stack: 'Total',
                data: [],
                color: '#00DDFF'
                },
            ]
        };
        const xdata = reactive([]) 
        const ydata = reactive([])
        const zdata = reactive([])
        for(let index=0;index<options.length;index++){
            let obj = options[index];
            xdata.push(obj.year);
            ydata.push(obj.grainproduction)
            zdata.push(obj.sownAreaOfGrainCrops)
        }
        console.log(xdata)
        option.xAxis.data = xdata
        option.series[0].data = ydata
        option.series[1].data = zdata
        console.log(ydata);
        myChart.setOption(option)
    }
    function getData(){
        //-:获取服务器数据
        axios.get('/api/queryCropTrend')
            .then((response)=>{
                console.log(response.data)
                if(response.data.code==200){
                    console.log(response.data.data)
                    options = response.data.data;
                    //=:初始化图表
                    chartBarInit();
                }
            })
            
    }
    onMounted(()=>{
        getData();
    })  
     
</script>
<style lang="css">
    h1 {
        color: white;
        position: relative;
        top: -70px;
    }
    .echarts{
        position: relative;
        bottom: -20px;
        left: 20px;
        width: 95%;
        height: 95%;
    }
</style>